<!--
 * @Author: your name
 * @Date: 2021-10-19 15:22:13
 * @LastEditTime: 2021-10-22 19:14:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Vuec:\Users\86131\Desktop\project\payforknowledge\src\views\register.vue
-->
<template>
  <div>
    <div class="app">
      <van-nav-bar title="注册" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="search" size="20" />
        </template>
      </van-nav-bar>
      <div class="top">
        <van-cell-group inset>
          <van-field v-model="phone" placeholder="请输入手机号" />
        </van-cell-group>
        <van-cell-group inset>
          <van-field v-model="code" placeholder="请输入验证码">
            <template #button>
              <button class="send" @click="sendCode">发送验证码</button>
            </template>
          </van-field>
        </van-cell-group>
      </div>

      <button class="register" @click="goLogin">注册</button>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
import { useRouter } from "vue-router";
import { Field, CellGroup } from "vant";
import { ref, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const onClickLeft = () => {
      router.go(-1);
    };

    let phone = ref();
    let code = ref();

    let message = computed(() => store.state.register.status);
    const sendCode = async () => {
      await store.dispatch("getRegister", {
        phone: phone.value,
        templateId: "537707",
      });
      if (message.value != 0) {
        alert("手机号错误");
        phone.value = "";
      }
    };

    const goLogin = () => {
      router.push("/login");
    };
    return {
      sendCode,
      phone,
      code,
      onClickLeft,
      message,
      goLogin,
    };
  },

  components: {
    VanNavBar: NavBar,
    VanIcon: Icon,
    VanCellGroup: CellGroup,
    VanField: Field,
  },
};
</script>

<style lang="less" scoped>
.app {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.van-icon {
  color: black;
}
/deep/.van-nav-bar .van-icon {
  color: #000000;
}
/deep/.van-field__control {
  width: 99%;
  margin: auto;
  border-bottom: 1px solid #e2e2e2;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
}
.top {
  margin-top: 50%;
}
.send {
  outline: none;
  border: none;
  width: 115px;
  height: 30px;
  border-radius: 15px;
  font-size: 11px;
  color: #ffffff;
  background-color: #4ab8fa;
}
.register {
  background-color: #4ab8fa;
  width: 300px;
  height: 50px;
  font-size: 16px;
  color: #ffffff;
  border-radius: 25px;
  outline: none;
  border: none;
  display: block;
  margin: 40px auto;
}
</style>
